import React from 'react'
import { IndexBar, NavBar, Popover } from 'react-vant';
import "./index.less"
// 列表组件
import CellCom from "./cell"
// 头部组件
import HeaderCom from "../../../components/header"

// 将汉字转成拼音插件
import { pinyin } from 'pinyin-pro';
export default function AddressList(props) {
    // 索引栏数据
    const [indexList] = React.useState(['⬆', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'])
    // type类型
    const [type] = React.useState(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'])
    // 模拟总数据
    const [data] = React.useState([
        {
            img: "/img/headImg.jpg",
            name: "a 小明",
            remark: undefined,
            type: "",
            sex: "男"
        },
        {
            img: "/img/headImg.jpg",
            name: "大白",
            remark: undefined,
            type: "",
            sex: "男"
        },
        {
            img: "/img/headImg.jpg",
            name: "24 ",
            remark: undefined,
            type: "",
            sex: "女"
        },
        {
            img: "/img/headImg.jpg",
            name: "张三",
            remark: "张",
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "李四",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "张子明",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "张亚冲",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "亚冲",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "嗣毅",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "李宵",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "浩普",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "帅浩",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "孟哲",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "A 爸爸",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "A 妈妈",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "A 哥哥",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "抖音",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "冯都",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "好久不见",
            remark: undefined,
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "余孟哲",
            remark: undefined,
            type: ""
        }
    ])
    // 筛选后的数据
    const [newData2, setnewData2] = React.useState([])
    // 定义一个变量用来判断是否显示索引栏标签
    const [showLabel, setShowLabel] = React.useState(true)

    React.useEffect(() => {
        // 获取声母
        let newData = data.map(item => {
            return {
                img: item.img,
                name: item.name,
                sex: item.sex,
                remark: item.remark,
                types: window.isNaN(Number(item.name.split(' ')[0])) ? item.name.split(' ')[0] : Number(item.name.split(' ')[0])
            }
        })
        let arr = newData.map(item => {
            let i = type.findIndex(ite => {
                return item.types === ite
            })
            return {
                img: item.img,
                name: item.name,
                sex: item.sex,
                remark: item.remark,
                types: i !== -1 ? type[i] : typeof item.types === 'number' ? String.fromCharCode(64 + parseInt(item.types)) : pinyin(item.name, { pattern: 'initial', type: 'array' })[0].slice(0, 1)
            }
        })
        setnewData2(arr)
    }, [])
    // PopoverRef
    const popover = React.useRef()
    // 新的朋友事件
    const newFriend = () => {
        props.history.push({
            pathname: "/main/newFriend",
            state: { path: props.location.pathname }
        })
    }
    // 仅聊天的朋友事件
    const onlyChat = () => {
        props.history.push({
            pathname: "/main/onlyChatFriend",
            state: { path: props.location.pathname }
        })
    }
    // 群聊事件
    const groupChat = () => {
        props.history.push({
            pathname: "/main/groupChat",
            state: { path: props.location.pathname }
        })
    }
    // 头部导航栏右侧事件
    const onClickRight = (e) => {
        if (e.target.className.baseVal === "icon search") {
            props.history.push({
                pathname: "/main/search",
                state: { path: props.location.pathname }
            })
        }
    }
    // 跳转到好友详情
    const toFriendMsg = (item) => {
        props.history.push({
            pathname: "/main/friendDetail",
            state: { path: props.location.pathname, msg: item }
        })
    }
    // 发送群聊事件
    const sendGroupChat = () => {
        console.log('发送群聊');
        popover.current.hide();//关闭popover
    }
    // 添加朋友事件
    const addFriend = () => {
        setTimeout(() => {
            props.history.push({
                pathname: "/main/addFriend",
                state: { path: props.location.pathname }
            })
        })
        popover.current.hide();//关闭popover
    }
    // 扫一扫
    const scan = () => {
        console.log('扫一扫');
        popover.current.hide();//关闭popover
    }
    return (
        <div className='addresslist'>
            <header>
                <NavBar
                    title="通讯录"
                    style={{ backgroundColor: "#ededed" }}
                    rightText={<p className='header_icon'>
                        <span>
                            <svg className='icon search' aria-hidden='true' style={{ fontSize: "17px", marginRight: '10px' }}>
                                <use xlinkHref="#icon-sousuo1"></use>
                            </svg>

                            {/* 点击加号出现弹出层 */}
                            <Popover
                                ref={popover}
                                theme="dark"
                                placement='bottom-end'
                                offset={[5, 8]}
                                style={{ width: '100px' }}
                                reference={<span>
                                    <svg className='icon' aria-hidden='true' style={{
                                        fontSize: "15px", border: '1px solid #000',
                                        borderRadius: '50%'
                                    }}>
                                        <use xlinkHref="#icon-jia"></use>
                                    </svg>
                                </span>}
                            >
                                <ul>
                                    <li onClick={sendGroupChat}>
                                        <svg className='icon' aria-hidden='true'>
                                            <use xlinkHref="#icon-xiaoxi2"></use>
                                        </svg>
                                        <p>发起群聊</p>
                                    </li>
                                    <li onClick={addFriend}>
                                        <svg className='icon' aria-hidden='true'>
                                            <use xlinkHref="#icon-tianjiapengyou"></use>
                                        </svg>
                                        <p>添加朋友</p>
                                    </li>
                                    <li onClick={scan}>
                                        <svg className='icon' aria-hidden='true'>
                                            <use xlinkHref="#icon-saoyisao"></use>
                                        </svg>
                                        <p>扫一扫</p>
                                    </li>
                                    <li>
                                        <svg className='icon' aria-hidden='true'>
                                            <use xlinkHref="#icon-icon-test1"></use>
                                        </svg>
                                        <p>收付款</p>
                                    </li>
                                    <li>
                                        <svg className='icon' aria-hidden='true'>
                                            <use xlinkHref="#icon-xiaoxi_xuanzhong"></use>
                                        </svg>
                                        <p>帮助与反馈</p>
                                    </li>
                                </ul>
                            </Popover>
                        </span>
                    </p>}
                    onClickRight={(e) => {
                        onClickRight(e)
                    }}
                />
                {/* <HeaderCom search={search} title="通讯录" icon2="#icon-sousuo1" icon3="#icon-jia"></HeaderCom> */}
            </header>
            <main style={{ position: "relative" }}>
                <IndexBar indexList={indexList} sticky={false}>
                    {/* 顶部 */}
                    <IndexBar.Anchor index="⬆" style={{ opacity: "0", position: 'absolute', left: "0", top: "0" }}></IndexBar.Anchor>
                    <CellCom icon="#icon-xindepengyou1" class="cell_icon_xindepengyou1" title="新的朋友" click={newFriend}></CellCom>
                    <CellCom icon="#icon-liaotiandepengyou" title="仅聊天的朋友" click={onlyChat}></CellCom>
                    <CellCom icon="#icon-qunliao" title="群聊" click={groupChat}></CellCom>
                    <CellCom icon="#icon-biaoqian" title="标签" class="cell_icon_label"></CellCom>
                    <CellCom icon="#icon-gongzhonghao" title="公众号" class="cell_icon_hao"></CellCom>
                    {
                        newData2.map((item, index) => {
                            let i = index
                            console.log(indexList);
                            if (i == 0 && item.types === 'A' || item.types === 'a') {
                                return <div key={index}>
                                    <IndexBar.Anchor key={index} index="A">A</IndexBar.Anchor>
                                    <CellCom toFriendMsg={() => {
                                        toFriendMsg(item)
                                    }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                                </div>
                            }
                            return item.types === 'A' || item.types === 'a' ? <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 1 && item.types === 'B' || item.types === 'b') {
                                return <IndexBar.Anchor key={index} index="B">B</IndexBar.Anchor>
                            }
                            return item.types === 'B' || item.types === 'b' ? <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 2 && item.types === 'C' || item.types === 'c') {
                                return <IndexBar.Anchor key={index} index="C">C</IndexBar.Anchor>
                            }
                            return item.types === 'C' || item.types === 'c' ? <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 0 && item.types === 'D' || item.types === 'd') {
                                return <div key={index}>
                                    <IndexBar.Anchor key={index} index="D">D</IndexBar.Anchor>
                                    <CellCom toFriendMsg={() => {
                                        toFriendMsg(item)
                                    }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                                </div>
                            }
                            return item.types === 'D' || item.types === 'd'? <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark!==undefined?item.remark:item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 4 && item.types === 'E' || item.types === 'e') {
                                return <div key={index}>
                                <IndexBar.Anchor index="E">E</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'E' || item.types === 'e' ? <div key={index}>
                                <IndexBar.Anchor index="E">E</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 5 && item.types === 'F' || item.types === 'f') {
                                return <div key={index}>
                                <IndexBar.Anchor index="F">F</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'F' || item.types === 'f' ? <div key={index}>
                                <IndexBar.Anchor index="F">F</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 6 && item.types === 'G' || item.types === 'g') {
                                return <div key={index}>
                                <IndexBar.Anchor index="G">G</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'G' || item.types === 'g' ? <div key={index}>
                                <IndexBar.Anchor index="G">G</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {/* {
                        newData2.map((item, index) => {
                            let i = index
                            if (i === 7 && item.types === 'H' || item.types === 'h') {
                                return <div key={index}>
                                    <IndexBar.Anchor index="H">H</IndexBar.Anchor>
                                    <CellCom toFriendMsg={() => {
                                        toFriendMsg(item)
                                    }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                                </div>
                            }
                            return item.types === 'H' || item.types === 'h' ? <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    } */}
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 8 && item.types === 'I' || item.types === 'i') {
                                return <div key={index}>
                                <IndexBar.Anchor index="I">I</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'I' || item.types === 'i' ? <div key={index}>
                                <IndexBar.Anchor index="I">I</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 9 && item.types === 'J' || item.types === 'j') {
                                return <div key={index}>
                                <IndexBar.Anchor index="J">J</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'J' || item.types === 'j' ? <div key={index}>
                                <IndexBar.Anchor index="J">J</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 10 && item.types === 'K' || item.types === 'k') {
                                return <div key={index}>
                                <IndexBar.Anchor index="K">K</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'K' || item.types === 'k' ? <div key={index}>
                                <IndexBar.Anchor index="K">K</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 11 && item.types === 'L' || item.types === 'l') {
                                return <IndexBar.Anchor key={index} index="L">L</IndexBar.Anchor>
                            }
                            return item.types === 'L' || item.types === 'l' ? <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 12 && item.types === 'M' || item.types === 'm') {
                                return <div key={index}>
                                <IndexBar.Anchor index="M">M</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'M' || item.types === 'm' ? <div key={index}>
                                <IndexBar.Anchor index="M">M</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 13 && item.types === 'N' || item.types === 'n') {
                                return <div key={index}>
                                <IndexBar.Anchor index="N">N</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'N' || item.types === 'n' ? <div key={index}>
                                <IndexBar.Anchor index="N">N</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 14 && item.types === 'O' || item.types === 'o') {
                                return <div key={index}>
                                <IndexBar.Anchor index="O">O</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'O' || item.types === 'o' ? <div key={index}>
                                <IndexBar.Anchor index="O">O</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 15 && item.types === 'P' || item.types === 'p') {
                                return <div key={index}>
                                <IndexBar.Anchor index="P">P</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'P' || item.types === 'p' ? <div key={index}>
                                <IndexBar.Anchor index="P">P</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 16 && item.types === 'Q' || item.types === 'q') {
                                return <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    <IndexBar.Anchor index="Q">Q</IndexBar.Anchor>
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'Q' || item.types === 'q' ? <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    <IndexBar.Anchor index="Q">Q</IndexBar.Anchor>
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 17 && item.types === 'R' || item.types === 'r') {
                                return <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    <IndexBar.Anchor index="R">R</IndexBar.Anchor>
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'R' || item.types === 'r' ? <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    <IndexBar.Anchor index="R">R</IndexBar.Anchor>
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 18 && item.types === 'S' || item.types === 's') {
                                return <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    <IndexBar.Anchor index="S">S</IndexBar.Anchor>
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'S' || item.types === 's' ? <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    <IndexBar.Anchor index="S">S</IndexBar.Anchor>
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {/* {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 4 && item.types === 'T' || item.types === 't') {
                                return <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    <IndexBar.Anchor index="T">T</IndexBar.Anchor>
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'T' || item.types === 't' ? <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    <IndexBar.Anchor index="T">T</IndexBar.Anchor>
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 4 && item.types === 'U' || item.types === 'u') {
                                return <div key={index}>
                                <IndexBar.Anchor index="U">U</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'U' || item.types === 'u' ? <div key={index}>
                                <IndexBar.Anchor index="U">U</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 4 && item.types === 'V' || item.types === 'v') {
                                return <div key={index}>
                                <IndexBar.Anchor index="V">V</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'V' || item.types === 'v' ? <div key={index}>
                                <IndexBar.Anchor index="V">V</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 4 && item.types === 'W' || item.types === 'w') {
                                return <div key={index}>
                                <IndexBar.Anchor index="W">W</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'W' || item.types === 'w' ? <div key={index}>
                                <IndexBar.Anchor index="W">W</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 4 && item.types === 'X' || item.types === 'x') {
                                return <div key={index}>
                                <IndexBar.Anchor index="X">X</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'X' || item.types === 'x' ? <div key={index}>
                                <IndexBar.Anchor index="X">X</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 4 && item.types === 'Y' || item.types === 'y') {
                                return <div key={index}>
                                <IndexBar.Anchor index="Y">Y</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'Y' || item.types === 'y' ? <div key={index}>
                                <IndexBar.Anchor index="Y">Y</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    }
                    {
                        newData2.map((item, index) => {
                            let i = index
                            if (i == 4 && item.types === 'Z' || item.types === 'z') {
                                return <div key={index}>
                                <IndexBar.Anchor index="Z">Z</IndexBar.Anchor>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div>
                            }
                            return item.types === 'Z' || item.types === 'z' ? <div key={index}>
                                <CellCom toFriendMsg={() => {
                                    toFriendMsg(item)
                                }} img={item.img} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                            </div> : null
                        })
                    } */}
                </IndexBar>
                {/* 底部显示有多少个朋友 */}
                <div className='bottomFriend'>
                    {newData2.length}个朋友
                </div>
            </main>
        </div>
    )
}
